import React from 'react'
import '../../static/MainArticles/mainArticles.css'
import { NavBar, Space, Toast, Avatar, Button, Tabs } from 'antd-mobile'
// import { ShareIcon } from 'tdesign-icons-react';
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'

export default function MainArticles() {
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <SearchOutline />
                {/* <ShareIcon /> */}
            </Space>
        </div>
    )
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    return (
        <div className='MainArticles_box'>
            <div className='MainArticles_NavBar'>
                <NavBar right={right} onBack={back}>
                </NavBar>
            </div>
            <div className='MainArticles_Avatar'>
                <div className='MainArticles_content'>
                    <Avatar src='https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ' style={{ '--size': '10rem', '--border-radius': '50%' }} />
                    <div style={{
                        marginLeft: "2rem", color: 'white'
                    }} className='MainArticles_Name'>
                        <h1> 晚风心里吹</h1>
                        <p>UID：2310100086</p>
                        <p>IP属地：北京</p>
                    </div>
                </div>
            </div >
            <div style={{ marginLeft: '1rem', color: 'white' }}>
                <p>点击这里，填写个性签名</p>
            </div>
            <div className='MainArticles_sexs'>
                <span style={{ borderRadius: '3rem', background: 'gray', height: '2rem', width: '4rem', display: 'inline-block', textAlign: 'center' }} className='sexs'>Lv.1</span>
                <span style={{ borderRadius: '3rem', marginLeft: '1rem', background: 'gray', height: '2rem', width: '4rem', display: 'inline-block', textAlign: 'center' }} className='sexs'>男</span>
            </div>
            <div className='MainArticles_big'>
                <div className='MainArticles_Three'>
                    <div className='MainArticles_hezi'>
                        <p style={{ fontSize: '2rem', color: "white" }}>104</p>
                        <span>关注</span>
                    </div>
                    <div className='MainArticles_hezi'>
                        <p style={{ fontSize: '2rem', color: "white" }}>6,152</p>
                        <span>粉丝</span>
                    </div>
                    <div className='MainArticles_hezi'>
                        <p style={{ fontSize: '2rem', color: "white" }}>6.1万</p>
                        <span>获赞</span>
                    </div>
                </div>
                <Button color='primary' fill='outline' style={{ '--border-color': 'white', '--border-radius': '3rem', '--text-color': 'white' }}>
                    编辑资料
                </Button>
            </div>
            <div className='MainArticles_button'>
                <Tabs>
                    <Tabs.Tab title='文章' key='fruits'>
                        菠萝
                    </Tabs.Tab>
                    <Tabs.Tab title='视频' key='vegetables'>
                        西红柿
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div >
    )
}
